<template>
  <XForm ref="XForm" :formList="formList" :formData="formData" />
</template>

<script>
import { XForm, XUtils } from '@/components/@fhsy/x-tool'
export default {
  components: {
    XForm
  },
  data () {
    return {
      formList: [
        { label: '活动名称', prop: 'name' },
        { label: '活动区域',
          prop: 'region',
          type: 'XSelect',
          options: [
            { label: '北京', value: 'Beijing' },
            { label: '上海', value: 'Shanghai' },
            { label: '南京', value: 'Nanjing' }
          ],
          attrs: {
            xl: 6,
            lg: 8,
            md: 24,
            sm: 24,
            xs: 24,
            multiple: true,
            filterable: true,
            allowCreate: true,
            defaultFirstOption: true,
            template: {
              props: ['item', 'index'],
              template: `<div>
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </div>`
            }
          }
        },
        { label: '自造控件',
          prop: 'myInput',
          template: {
            data () {
              return { value: 0 }
            },
            template: '<el-slider v-model="value" @change="$emit(\'valueChange\', value)"></el-slider>'
          }
        },
        { template: buttonOption, span: 24 }
      ],
      formData: {}
    }
  },
  mounted () { this.formData = XUtils.initFormData(this.formList, this.formData) }
}
let buttonOption = {
  props: ['_this'],
  template: `<div>
              <el-button type="primary" @click="onSubmit(_this)">立即创建</el-button>
              <el-button @click="reset(_this)">重 置</el-button>
            </div>`,
  methods: {
    onSubmit (_this) {
      _this.$refs['XForm'].validate(() => { // 调用 XForm 的表单校验方法
        this.$message(JSON.stringify(_this.formData))
      })
    },
    reset (_this) {
      _this.$refs['XForm'].resetFields() // 调用 XForm 的重置方法
    }
  }
}
</script>
